import React, { Component } from 'react'

import Newpeople from "./components/newpeople/newpeople";
import Banner from "./components/banner/banner";
import Indexgoods from './components/indexgoods/indexgoods';
import Seckill from './components/seckill/seckill';
import Groupon from './components/groupon/groupon'


import { reqgetbanner, reqgetnew, reqindexgoods, reqcate, reqgetgroupon, reqgetcountdown, reqgetseckill } from '../../request/api';

import orange_logo2 from "../../assets/img/pic_logo_white 2.png";
import icon_location from "../../assets/img/icon_location@3x.png";
import { FireFill } from 'antd-mobile-icons'
import { Link } from 'react-router-dom'

import './home.less'
import { countTime } from '../../filters';

export default class home extends Component {
  constructor() {
    super();
    this.state = {
      getnew: [],//新人专享
      getindexgoods: [],//首页商品信息
      groupon: [],//万人团
      seckill: [],//秒杀
      cates: [],//商品分类
      n: 0,
      banner: [],
      timeArr: { h: 0, m: 0, s: 0 }
    }
  }
  componentDidMount() {
    //页面倒计时 开启定时器
    this.timer = setInterval(() => {
      let times = countTime("2022-05-24 00:00:00");
      this.setState({
        timeArr: { ...times }
      })
    })
    reqgetnew().then(res => {//新人专享
      this.setState({
        getnew: res.data.list
      })
    })
    reqgetbanner().then(res => {//轮播图
      this.setState({
        banner: res.data.list
      })
    })
    reqcate().then(res => {//商品分类
      this.setState({
        cates: res.data.list
      })
    })
    reqgetseckill().then(res => {//秒杀
      this.setState({
        seckill: res.data.list
      })
    })
    reqgetgroupon().then(res => { //万人团
      this.setState({
        groupon: res.data.list
      })
    })
    reqindexgoods().then(res => {//首页商品
      this.setState({
        getindexgoods: res.data.list
      })
    })
  }
  componentWillUnmount() {
    // 清除定时器
    clearInterval(this.timer)
  }
  changeN(n) {
    this.setState({
      n
    })
  }
  render() {
    const { getnew, banner, timeArr,
      cates, seckill, groupon, getindexgoods, n } = this.state;
    // console.log(timeArr);
    return (
      <div className='home'>
        <div className='home-header'>
          <img className='logo' src={orange_logo2} alt="" />
          <div className='ipt'>
            <input type="text" />
            <span>搜索</span>
          </div>
          <img className='location' src={icon_location} alt="" />
        </div>

        <div className='home-body'>
          {/* 新人专享 */}
          <Newpeople getnew={getnew} timeArr={timeArr}></Newpeople>
          {/* 轮播图 */}
          <Banner banner={banner}></Banner>
          {/* 导航栏 */}
          <div className='nav'>
            {cates.length > 0 ? <>
              {cates.map(item => {
                return (
                  <Link to="/index/cate" className='item' key={item.id}>
                    <span><FireFill /></span>
                    <p>{item.catename}</p>
                  </Link>
                )
              })}
            </> : null}
          </div>
          {/* 秒杀 */}
          <Seckill seckill={seckill} timeArr={timeArr}></Seckill>
          {/* 万人团 */}
          <Groupon groupon={groupon} timeArr={timeArr}></Groupon>
          {/* 获取商品信息首页 */}
          <Indexgoods getindexgoods={getindexgoods} n={n} changeN={n => this.changeN(n)}></Indexgoods>
        </div>

      </div>
    )
  }
}
